<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <el-dialog class="ba-operate-dialog" :model-value="baTable.form.operate == 'Audit' ? true : false"
        @close="baTable.toggleForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">开票页面
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'">
                <el-descriptions v-if="!isEmpty(baTable.form.extend!.audit)" :column="2" border>
                    <el-descriptions-item label="申请人">
                        {{ baTable.form.extend!.audit.user.username }}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单号">
                        {{ baTable.form.extend!.audit.order.order_no }}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单内容">
                        {{ baTable.form.extend!.audit.order.remark }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发票金额">
                        {{ baTable.form.extend!.audit.price }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发票金额">
                        {{ baTable.form.extend!.audit.price }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发票抬头">
                        {{ baTable.form.extend!.audit.invoice_header }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发票类型">
                        {{ baTable.form.extend!.audit.invoice_type_text }}
                    </el-descriptions-item>
                    <el-descriptions-item label="纳税人识别号">
                        {{ baTable.form.extend!.audit.invoice_tax_no }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发送邮箱">
                        {{ baTable.form.extend!.audit.email }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发票抬头类型">
                        {{ baTable.form.extend!.audit.invoice_header_type_text }}
                    </el-descriptions-item>
                    <el-descriptions-item label="申请时间">
                        {{ baTable.form.extend!.audit.create_time }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发票内容" :span="2">
                        {{ baTable.form.extend!.audit.invoice_service_text }}
                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="开票" v-if="baTable.form.extend!.audit.invoice_status == 0">
                        <el-button type="primary" @click="subSaveClick">发送邮箱</el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-scrollbar>
    </el-dialog>
</template>


<script setup lang="ts">
import { inject, ref } from 'vue'
import { isEmpty } from 'lodash-es'
import { ElNotification } from 'element-plus'
import baTableClass from '/@/utils/baTable'
const baTable = inject('baTable') as baTableClass
import { invoiveSendEmail } from '/@/api/backend/invoice/index'

const subSaveClick = () => {
    baTable.form.loading = true
    invoiveSendEmail('post', { id: baTable.form.extend!.audit.id })
        .then((res: any) => {
            ElNotification({
                message: res.msg,
                type: 'success',
            })
            baTable.onTableHeaderAction('refresh', {})
            baTable.toggleForm()
        })
        .finally(() => {
            baTable.form.loading = false
        })
}


</script>

<style scoped lang="scss">
:deep(.color-red) {
    color: var(--el-color-danger) !important;
}

.table-el-tree {
    :deep(.el-tree-node) {
        white-space: unset;
    }

    :deep(.el-tree-node__content) {
        display: block;
        align-items: unset;
        height: unset;
    }
}
</style>
